

<template>
    <div class="scrollbar routerview">
      <div class="innerBox" v-if="!isHide">
        <div class="header-box">
          <div>
            <h3 style="color:#64d572">{{count1}}</h3>
            <div>出库单量</div>
          </div>
          <div>
            <h3 style="color:#2d8cf0">{{count2}}</h3>
            <div>出库件量</div>
          </div>
          <div>
            <h3 style="color:#808080">{{count3}}</h3>
            <div>合格数量</div>
          </div>
          <div>
            <h3 style="color:#ff8000">{{count4}}</h3>
            <div>不合格量</div>
          </div>
        </div>
        <div class="search-box">
           <el-select v-model="keyValue" clearable placeholder="请选择查询条件" class="search">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
            </el-select>
            <el-input
            class="search"
            placeholder="搜索出库信息"
            prefix-icon="el-icon-search"
            :disabled="disable"
            clearable
            v-model="moreSearch.searchValue">
            </el-input>
            <el-select v-model="moreSearch.status" clearable placeholder="是否合格" class="search" :disabled="disable">
            <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
            </el-select>
            <el-button type="primary"  @click="searchData" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" @click="resetData" icon="el-icon-refresh-right">重置</el-button>
            
             <download-excel
             :data   = "multipleSelection"
             :fields = "json_fields"
             type    = "csv"
             worksheet = "My Worksheet"
             name    = "出库数据.xls">
                <el-button type="primary"  icon="el-icon-folder-opened" v-permission="'add'">导出</el-button>
          </download-excel>
        </div>

         <div class="bodyBox">
            <el-table
            :data="queryFlag?queryData.slice((currentpage-1)*pagesize,currentpage*pagesize):list.slice((currentpage-1)*pagesize,currentpage*pagesize)"
            tooltip-effect="dark"
            :header-cell-style="{background:'#f5f7fa',color:'#606266',width:'100%'}"
            style="width: 100%"
            height="100%"
            max-height="70vh"
            border
            :key="key"
             :row-key="getKey"
             @selection-change="handleSelectionChange"
            >
           <el-table-column
            type="selection"
            fixed="left"
            :reserve-selection="true"
            width="55">
            </el-table-column>
            <el-table-column
            prop="objectId"
            label="出库编号"
            fixed="left"
            width="120">
            </el-table-column>
            <el-table-column
            prop="parts.name"
            label="配件名称"
            width="120">
            </el-table-column>
            <el-table-column
            prop="amount"
            label="出库数量"
            sortable
            width="120">
            </el-table-column>
            <el-table-column
            prop="stock.stallsNo"
            label="货架编号"
            width="100">
            </el-table-column>
            <el-table-column
            prop="stock.storage.name"
            label="存储仓库"
            width="120">
            </el-table-column>
            <el-table-column
            prop="stock.source.name"
            label="生产来源"
            width="120">
            </el-table-column>
             <el-table-column
            prop="toEnd.name"
            label="出库去向"
            width="120">
            </el-table-column>
            <el-table-column
            prop="stock.status"
            label="质量"
            sortable
            width="90">
                <template slot-scope="scope">
                <el-tag
                :type="scope.row.stock.status ? 'success' : 'info'"
                disable-transitions>{{scope.row.stock.status?'合格':'不合格'}}</el-tag>
                </template>
            </el-table-column>
             <el-table-column
            prop="operator.name"
            label="出库员"
            width="120">
            </el-table-column>
            <el-table-column
            prop="updatedAt"
            label="更新日期"
            sortable
            width="240">
            </el-table-column>
            <el-table-column
            prop="createdAt"
            label="创建日期"
            sortable
            min-width="200">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="180">
                <template slot-scope="scope">
                 <el-button
                size="mini"
                plain
                @click="handleView(scope.row)">查看</el-button>

                <template>
                <el-popconfirm
                title="是否退回该出库记录？"
                style="margin-left:10px"
                v-permission="'delete'"
                @confirm="handleDelete(scope.$index, scope.row)"
                >
                <el-button
                size="mini"
                type="danger"
                slot="reference"
                :loading="scope.$index===deleteIndex"
                >退回</el-button>
                </el-popconfirm>
                </template>
                </template>
            </el-table-column>
            </el-table>
          </div>
        <div class="flootBox">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentpage"
                :page-sizes="[20, 50, 100]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryFlag?queryData.length:list.length">
            </el-pagination>
        </div>
        </div>
        <state-view :isShow='stateShow' :description='stateDescription' :image='stateImage' class="innerBox" @reload='resetPagerData'></state-view>
        <div v-loading.lock="isloading" class="layout-center" v-if="isloading" style="height: 100%;z-index:1"></div>
          <outStockDialog
            :Visible='dialogVisible' 
            v-if="dialogVisible" 
            @close='dialogVisible=false' 
            :listData='listData'
            @save='resetLoadData'
            :viewMark='true'
            >
        </outStockDialog>
    </div>
</template>

<script>
import outStockDialog from '@/components/dialog/outStockDialog'

import { common } from '@/mixin/common'
export default {
  components: { outStockDialog },
  props: {
    isFinish:{
        type:Boolean,
        default:false
    }
  },
  mixins:[common],
  data () {
    return {
      menuname:'出库管理',
      count1:0,
      moreSearch:{},
      options:[
         {
            value:'objectId',
            label:'出库编号'
          },
          {
            value:'parts',
            label:'配件名称'
          },
          {
            value:'stallsNo',
            label:'货架编号'
          },
           {
            value:'storage',
            label:'存储仓库'
          },
          {
            value:'source',
            label:'生产来源'
          },
          {
            value:'toEnd',
            label:'出库去向'
          },
          {
            value:'operator',
            label:'出库人员'
          }
      ],
      options1:[
        {
          value:'0',
          label:'不合格'
        },
        {
          value:'1',
          label:'合格'
        }
      ],
      deleteIndex:-1,
      dialogVisible:false,
      listData:{},
      multipleSelection:[],
      json_fields: {
        "出库编号": "objectId",
        "配件名称": "parts.name",
        "出库数量": "amount",
        "货架编号": "stock.stallsNo",
        "存储仓库": "stock.storage.name",
        "生产来源": "stock.source.name",
        "出库去向": "toEnd.name",
        "质量": "stock.status",
        "出库人员": "operator.name",
      }
    }
  },
  computed: {
    count2(){
      let sum = 0
      this.list.forEach(item => {
        sum=sum+item.amount;
      });
      return sum
    },
    count3(){
      let sum = 0
      this.list.forEach(item => {
        if(item.stock.status){
          sum++;
        }
      });
      return sum
    },
    count4(){
      let sum = 0
      this.list.forEach(item => {
        if(!item.stock.status){
          sum++;
        }
      });
      return sum
    },
    getKey(){
      return function(row){
        return row.objectId
      }
      
    },
     
  },
  watch: {
    keyValue(value){
        if(value){
            this.disable=false
        }else{
            this.disable=true
            Object.keys(this.moreSearch).map(key => this.moreSearch[key] = '')
        }
    },
  },
   deactivated() {
     if(this.$route.query.id||this.$route.query.type){
      this.queryFlag=false
      this.disable=true
      this.keyValue=''
      this.searchValue=''
      this.queryData.length=0
      Object.keys(this.moreSearch).map(key => this.moreSearch[key] = '')
    }
  },
  created () {},
  mounted () {},
  methods: {
     
     getData(time){
        this.timer=setTimeout(() => {
          const query = this.$Bmob.Query('OutStock')
          query.order('-createdAt')
          query.include('parts','operator','stock','toEnd','stock.source','stock.storage','stock.parts')
          query.limit(9999)
          query.find().then(res=>{
            this.count1=res.length
            console.log(res);
            clearTimeout(this.timer)
            this.successHandle()
            this.list=res
            this.queryFlag?this.searchData():null
          }).catch(err=>{
            clearTimeout(this.timer)
            this.errorHandle()
          })
    }, time);
    },
     getObjectData(id){
        const query = this.$Bmob.Query('OutStock')
        query.order('-createdAt')
        query.include('parts','operator','stock','toEnd','stock.source','stock.storage','stock.parts')
        query.limit(9999)
        query.equalTo('objectId','==',id)
        query.find().then(data => {
            this.list=data
            // this.LoadQueryData()
            this.successHandle()
        }).catch(err=>{
            this.errorHandle()
        })
    },
     getTypeData(type,typeid){
        const query = this.$Bmob.Query('OutStock')
        query.order('-updatedAt')
        query.include('parts','operator','stock','toEnd','stock.source','stock.storage','stock.parts')
        query.limit(9999)
        query.equalTo(type,'==',typeid)
        query.find().then(data => {
            this.list=data
            // this.LoadQueryData()
            this.successHandle()
        }).catch(err=>{
            this.errorHandle()
        })
    },
   
      
    handleDelete(index,rowlist){
      this.deleteIndex=index
        this.$http.deleteData(this,rowlist.objectId,'OutStock').then(async success=>{
            await this.updateStockAmount(rowlist.stock.objectId,Number(rowlist.amount),'1')
            await this.updateStorageLimitSpace(rowlist.stock.storage.objectId,Number(rowlist.amount),'0')
            if(this.queryFlag){
                this.queryData.splice(index,1)
                this.deleteIndex=-1
                if(this.queryData.length===0){
                  this.resetData()
                }
            }else{
                this.list.splice(index,1)
                this.deleteIndex=-1
                if(this.list.length===0){
                  this.resetData()
                }
            }
        }).catch(err=>{
          this.deleteIndex=-1
        })
    },
    handleView(rowlist){
      this.listData = JSON.parse(JSON.stringify(rowlist))
      this.dialogVisible?this.dialogVisible=false:this.dialogVisible=true
    },
   
    searchData(){
      if(this.moreSearch.searchValue||this.moreSearch.status){
          this.queryFlag=true
          this.currentpage=1
          this.pagesize=20
          this.queryData=this.multiFilter(this.list,this.moreSearch)
        
      }else{
          this.$utils.message.warning(this,'搜索内容不能为空')
      }
  },
   search(){
    this.queryFlag=true
    this.currentpage=1
    this.pagesize=20
    this.key++
    this.queryData=this.multiFilter(this.list,this.moreSearch)
  },
   multiFilter(array,filters){
      //  var reg =  new RegExp(this.moreSearch.searchValue,'i');
       const filterKeys = Object.keys(filters)
       return array.filter(item=>{
         return filterKeys.every(key=>{
           if(!filters[key]) return true
           return filters[key]==item['stock'][key]||filters[key]===item['stock'][this.keyValue]['name']||
           filters[key]===item['stock'][this.keyValue]||filters[key]===item[this.keyValue]['name']||filters[key]===item[this.keyValue]
          //  return filters[key]==item[key]||reg.test(item[this.keyValue]['name'])||reg.test(item[this.keyValue])
         })
       })
    },
    resetData(){
        this.queryFlag=false
        this.disable=true
        this.keyValue=''
        this.searchValue=''
        this.queryData.length=0
        Object.keys(this.moreSearch).map(key => this.moreSearch[key] = '')
        this.isHide=true
        this.isloading=true
        this.checkUserVerified().then(res=>{
            if(res) this.checkUserPermission()
        })
    },
}
}

</script>
<style lang='scss' scoped>
.header-box {
  display: flex;
  margin: 5px 5px 10px;
  padding: 20px;
  border-radius: 15px;
  background-color: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  font-size: 14px;

  h3 {
    font-size: 20px;
    margin-bottom: 5px;
  }
  div {
    flex:1;
  }
}

.search-box {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    [class*="el"] {
        height: 40px;
        margin: 5px;
        text-align: center;
    }
}

/deep/.el-input__inner,.el-input{
    flex-basis: 230px;
}

/deep/.cell {
    text-align: center;
     white-space: nowrap;
}
.bodyBox {
    margin: 15px 5px;
}

.flootBox {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>

